<template>
  <div>
    <el-form
      :model="friendForm"
      :rules="rules"
      ref="FriendForm"
      label-width="80px"
    >
      <el-form-item
        label="备注"
        prop="friendRemark"
      >
        <el-input
          placeholder="请输入备注"
          v-model="friendForm.friendRemark"
        ></el-input>
      </el-form-item>
    </el-form>
    <form-button
      :loading="submitLoading"
      @submit="submitForm('FriendForm')"
      @cancel="cancelSubmit"
    />
  </div>
</template>

<script>
import { modifyRemark } from '@/api/social'
export default {
  name: 'ModifyRemarkName',
  props: {
    friendId: {
      type: Number,
      required: true
    },
    friendRemark: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      friendForm: {
        friendId: '',
        friendRemark: ''
      },
      rules: {
        friendRemark: [
          { max: 10, message: '长度最多10个字符', trigger: 'blur' }
        ]
      },
      submitLoading: false
    }
  },
  methods: {
    reset () {
      this.friendForm.friendId = this.friendId
      this.friendForm.friendRemark = this.friendRemark
    },
    // 取消提交
    cancelSubmit () {
      this.$emit('cancel')
    },
    // 提交修改表单
    submitForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.handleModifyRemark()
        } else {
          return false
        }
      })
    },
    // 修改备注
    async handleModifyRemark () {
      try {
        this.submitLoading = true
        await modifyRemark(this.friendForm.friendId, this.friendForm.friendRemark)
        this.submitLoading = false
        this.$message.success('修改备注成功')
        this.$emit('submit', this.friendForm.friendRemark)
      } catch {
        this.submitLoading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
